<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../css/gouwuche.css">
    <title>仿联想官网购物车页</title>
</head>
<body>
    <table>
        <caption>
            购物车
        </caption>
        <thead>
            <tr>
                <!-- 全选复选框 -->
                <th>
                    <input type="checkbox" name="checkAll" id="check-all" checked /><label for="check-all">全选</label>
                </th>
                <th>图片</th>
                <th>品名</th>
                <th>单位</th>
                <th>单价/元</th>
                <th>数量</th>
                <th>金额/元</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    <input type="checkbox" name="item" value="SN-1020" checked />
                </td>
                <td>
                    <a href=""><img src="../img/IPzhoubian1.jpg" alt="" /></a>
                </td>
                <td>联想Howard蓝牙无线双模鼠标</td>
                <td>台</td>
                <td class="price">299</td>
                <td><input type="number" min="1" value="1" /></td>
                <td class="amount">xxxx</td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" name="item" value="SN-1020" checked />
                </td>
                <td>
                    <a href=""><img src="../img/IPzhoubian2.jpg" alt="" /></a>
                </td>
                <td>小新平板多彩保护夹湖光蓝</td>
                <td>部</td>
                <td class="price">59</td>
                <td><input type="number" min="1" value="2" /></td>
                <td class="amount">xxxx</td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" name="item" value="SN-1030" checked />
                </td>
                <td>
                    <a href=""><img src="../img/iPad3.jpg" alt="" /></a>
                </td>
                <td>联想平板小新Pad 2022 10.6</td>
                <td>台</td>
                <td class="price">1999</td>
                <td><input type="number" min="1" value="1" /></td>
                <td class="amount">xxxx</td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" name="item" value="SN-1040" checked />
                </td>
                <td>
                    <a href=""><img src="../img/IPzhoubian4.jpg" alt="" /></a>
                </td>
                <td>联想双肩包</td>
                <td>台</td>
                <td class="price">69</td>
                <td><input type="number" min="1" value="2" /></td>
                <td class="amount">xxxx</td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" name="item" value="SN-1050" checked />
                </td>
                <td>
                    <a href=""><img src="../img/IPzhoubian5.jpg" alt="" /></a>
                </td>
                <td>拯救者电动升降桌T7</td>
                <td>台</td>
                <td class="price">2699</td>
                <td><input type="number" min="1" value="1" /></td>
                <td class="amount">xxxx</td>
            </tr>
        </tbody>
        <tfoot>
            <tr style="font-weight: bolder; font-size: 1.2em">
                <td colspan="5">总计:</td>
                <td id="sum">xxxx</td>
                <td id="total-amount">xxxx</td>
            </tr>
        </tfoot>
    </table>

    <script src="../js/gouwuche.js"></script>

    
</body>
</html>